<template>
  <el-container style="height: 100vh">
    <el-header :style="{backgroundImage:'url('+headBgImgUrl+')'}">
      <router-link
        to="/"
        style="text-decoration:none; color:#ffff; display:inline-block; position:absolute;left:30px;top:0;height:60px;line-height:60px;font-size:20px;font-weight:bold"
      >优趣学生信息管理系统</router-link>
      <span>欢迎您,{{who}}</span>
      <a class="exitBox" @click="quit">
        <label class="exitIcon" :style="{backgroundImage:'url('+exitImgUrl+')'}"></label>
        退出
      </a>
      <!-- <el-dropdown>
        <i class="el-icon-setting" style="margin:0 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item >退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>-->
    </el-header>
    <el-container style="overflow:auto">
      <MainSide></MainSide>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <div class="page-footer">
      ICP证:
      <a target="_blank" class="zhen" href="http://www.beian.miit.gov.cn">浙ICP备19035240号-1</a>
    </div>
  </el-container>
</template>
<script>
import MainSide from "../components/MainSide.vue";
export default {
  components: { MainSide },
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    };
    return {
      headBgImgUrl: require("../assets/bg.jpg"),
      tableData: Array(20).fill(item),
      who: "",
      exitImgUrl: require("../assets/icon/exit.png")
    };
  },
  methods: {
    async getUserName() {
      let res = await this.$http.get("UserAPI/getUsername");
      this.who = res.data.username;
    },
    quit() {
      console.log(1);

      sessionStorage.clear();
      this.$router.push("/");
    }
  },
  created() {
    this.getUserName();
  }
};
</script>
<style scope>
html,
body,
p {
  margin: 0;
  padding: 0;
}
.el-header {
  background-color: #303133;
  color: #eeee;
  line-height: 60px;
  text-align: right;
  font-size: 12px;
  background-position: right center;
}

.el-aside {
  color: #ffffff;
  background-color: #003bbd !important;
}
.el-menu {
  border: 0;
  color: #ffffff;
  background-color: #003bbd;
}
.el-menu-item {
  color: #ffffff;
}
/* .el-menu-item.active{
  background: #ffffff;
  color: black;
} */
.el-submenu__title:hover {
  background-color: #003bbd;
}
.exitIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-position: center center;
  transform: translateY(5px);
  margin-left: 10px;
  cursor: pointer;
}
.exitBox {
  display: inline-block;
  cursor: pointer;
}
.page-footer {
  padding: 10px 0;
  background-color: #003bbd;
  display: flex;
  justify-content: center;
  color: gray;
}
.zhen{
  text-decoration: none;
  color: orange;
}
</style>